<template>
  <div class="mod-setting">
    <div class="title">设置mod</div>
    <main>
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>名称</th>
            <th>编码</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in modList" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.code }}</td>
            <td><button @click="remove(item.id)">删除</button></td>
          </tr>
          <tr>
            <td></td>
            <td><input type="text" v-model="form.name" /></td>
            <td><input type="text" v-model="form.code" /></td>
            <td><button @click="submit">提交</button></td>
          </tr>
        </tbody>
      </table>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { onMounted, ref } from "vue";
import useModStore from "../../store/mod.store";
const { initMod, genMod, addMod, delMod } = useModStore();
const { modList } = storeToRefs(useModStore());

onMounted(() => {
  initMod();
});

const form = ref({
  name: "",
  code: "",
});

const submit = async () => {
  await addMod(genMod(form.value.name, form.value.code));
  initMod();
};

const remove = async (id?: number) => {
  if (id !== 0 && !id) return;
  await delMod(id);
  initMod();
};
</script>

<style scoped lang="scss">
.mod-setting {
  .title {
    display: flex;
    align-items: center;
    height: 30px;
    background-color: #1f1f1f;
    color: #fff;
    cursor: pointer;

    &:hover {
      color: #4a90b0;
    }
  }
}
</style>
